<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="赵鹤阳">
    <title></title>
    <style>
        .box {
            width: 500px;
            height: 300px;
            margin: 100px auto;
            border: 1px solid #ddd;
        }

        .clock {
            margin: 100px 180px;
        }

        span {
            display: inline-block;
            width: 50px;
            height: 20px;
            border: 1px solid #000;
            text-align: center;
        }

        button {
            width: 130px;
            height: 30px;
            margin-top: 10px;
            border-radius: 10px;
            border: none;
            outline: none;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="clock">
            <div><span>05</span>分<span>03</span>秒</div>
            <button type="button">开始倒计时</button>
        </div>

    </div>

</body>

</html>
<script>
    var btn = document.querySelector('button');
    var isBegin = false;
    var isEnd = false;
    var timer;
    btn.onclick = function () {
        isBegin = !isBegin;
        if (isEnd == true) {
            return;
        }
        if (isBegin) {
            btn.innerHTML = '暂停倒计时';
            timer = setInterval(start, 1000);
        }
        else {
            btn.innerHTML = '开始倒计时';
            clearInterval(timer);
        }

    }
    function start() {
        var spans = document.querySelectorAll('span');
        var allTime = spans[0].innerHTML * 60 + spans[1].innerHTML * 1;

        if (allTime == 0) {
            clearInterval(timer);
            return;
        }
        allTime--;
        if (allTime == 0) {
            isEnd = true;
            btn.innerHTML = '计时结束';

        }
        var munutes = parseInt(allTime / 60);
        var seconds = allTime % 60;
        spans[0].innerHTML = munutes < 10 ? '0' + munutes : munutes;
        spans[1].innerHTML = seconds < 10 ? '0' + seconds : seconds;
    }

</script>